<div data---="form__common.form__icon:plug;if:widgetsform;width:1000;reload:widgetsform/reload;submit:widgetsform/submit;autofocus:true" class="hidden">

	<div data-scope="widgetsform.form">
		<div class="padding bg-yellow">
			<div class="row">
				<div class="col-md-4 col-md-offset-4">
					<br class="hidden-xs" />
					<div data---="preview__?.picture__width:300;height:200;url:[url]api/upload/base64/" class="m"></div>
					<div class="center help">
						@(Drag & Drop preview of the widget)<br />
						<b>@(300x200px)</b>
					</div>
					<br class="hidden-xs" />
				</div>
			</div>
		</div>
		<div class="padding">
			<div class="row">
				<div class="col-sm-6">
					<div data---="input__?.name__required:true;maxlength:50" class="m">@(Name)</div>
					<div data-bind="?.id__show" class="hidden m">
						<div data---="checkbox__?.replace">@(Replace the widget body in the entire content)</div>
					</div>
				</div>
				<div class="col-sm-6 m">
					<div data---="input__?.category__dirsource:widgetsform.categories;icon:folder-o;required:true;placeholder:@(Choose a category)">@(Category)</div>
				</div>
			</div>
		</div>
		<div class="padding bg-smoke">
			<div data---="codemirror__?.body__height:500;icon:code;required:true;tabs:true;trim:true">@(Source-code)</div>
			<div class="row fs12 mt10">
				<div class="col-xs-6">
					<span class="link exec mr10 b" data-exec="widgetsform/upload"><i class="far fa-folder mr5"></i>@(Insert file)</span>
					<span class="link exec hidden" data-exec="widgetsform/backups" data-bind="?.id__show"><i class="far fa-clock-o mr5"></i>@(Restore a backup)</span>
				</div>
				<div class="col-xs-6 right">
					<span class="link exec mr10" data-exec="widgetsform/template"><i class="fa fa-code mr5"></i>@(Preddefined template)</span>
					<a href="https://wiki.totaljs.com/?q=cms%20widgets" class="link" target="_blank"><i class="fa fa-book mr5"></i>@(Documentation)</a>
				</div>
			</div>
		</div>
	</div>

	<nav data---="validation__widgetsform.form">
		<button name="submit">@(SAVE)</button>
		<button name="cancel">@(Cancel)</button>
	</nav>

</div>

<script id="widgetstemplate" type="text/plain">
<CSS>
	/* "$color" variable needs to be defined in globals */
	.wmywidgetname { border: 2px solid $color; }
</CSS>

<JS editor>

	// Optional, this code you can remove

	// option(id, label, defValue, [type]);
	// https://componentator.com/#j-multioptions
	option('size', 'Size', 10);

	exports.configure = function(options, element, prev) {

		// is executed if the user change the widget settings
		// options = defined options (always Object)
		// element = jQuery element
		// prev    = previous options (can be "null")

		// Here you can transform the widget e.g. like this:
		element.find('.wmywidgetname').css('font-size', options.size);
	};

</JS>

<JS total>

	// Optional, you can remove this code

	exports.install = function() {
		// optional
	};

	exports.uninstall = function() {
		// optional
	};

	// Server-side processing (async)
	exports.render = function(options, html, next, template) {

		// optional

		// options   = defined options (always Object)
		// html      = String (a content of the whole widget element)
		// next      = Function
		// template  = String (a content defined as a script with type="text/html")

		// Next needs to return a new HTML string
		// CMS replaces old HTML with a new
		next(html + 'UPDATED');

	};
</JS>

<div class="wmywidgetname CMS_edit wb wm wp">Lorem Ispum Text</div>
</script>

<script>

	PLUGIN('widgetsform', function(exports) {

		var categories = [{ name: '@(Layout)', id: 'Layouts'},{ name: '@(Columns)', id: 'Columns' },{ name: '@(Content)', id: 'Content' },{ name: '@(Inline)', id: 'Inline' },{ name: '@(Newsletter)', id: 'Newsletter' }];
		categories.quicksort('name');

		SET('?.categories', categories);

		exports.reload = function(com) {
			com.reconfigure({ title: GET('widgetsform.form.id') ? '@(Edit widget)' : '@(New widget)' });
			FUNC.loading(false, 1000);
		};

		exports.upload = function(el) {
			refresh_filebrowser(function(file) {
				SETTER('.widgetsform.form.body/insert', file);
			});
		};

		exports.template = function() {
			SET('?.form.body', $('#widgetstemplate').html().replace(/<CSS/g, '<style').replace(/<\/CSS/g, '</style').replace(/<JS/g, '<script').replace(/<\/JS/g, '</script').trim());
		};

		exports.submit = function(hide) {
			FUNC.loading(true);
			AJAX('POST [url]api/widgets/ REPEAT', GETR('widgetsform.form'), function(response) {
				FUNC.loading(false, 1000);
				if (response.success) {
					SETTER('snackbar/success', '@(Widget has been saved successfully.)');
					EXEC('widgets/refresh');
					hide();
				}
			});
		};

		exports.backups = function(el) {

			FUNC.loading(true);
			AJAX('GET [url]api/widgets/{0}/backups/'.format(GET('?.id')), function(response) {

				FUNC.loading(false, 1000);

				for (var i = 0, length = response.length; i < length; i++) {
					var item = response[i];
					item.name = '{0} <b class="badge badge-blue"><i class="fa fa-user mr5"></i>{1}</b>'.format(item.date.format('@(yyyy-MM-dd HH:mm)'), item.user);
				}

				response.quicksort('date', false);

				SETTER('suggestion/show', 'left', el, response, function(value) {
					FUNC.loading(true);
					setTimeout(function() {
						MODIFY('widgetsform.form.body', value.data.body);
						FUNC.loading(false, 1000);
					}, 100);
				});
			});
		};
	});
</script>
